<template>
	<view class="tbody">
		<!-- 头像 -->
		<view class="grade">
			<text class="grade-one">头像</text>
			<view class="grade-two">
				<image :src="ip + userInfo.avatar" style="width: 64rpx;height: 64rpx;margin-right: 8rpx;" mode="">
				</image>
			</view>
		</view>
		<!-- 昵称 -->
		<view class="grade">
			<text class="grade-one">姓名</text>
			<view class="grade-two">
				<view class="fize">
					{{userInfo.realName}}
				</view>

			</view>
		</view>
		<!-- 电话 -->
		<view class="grade">
			<text class="grade-one">电话</text>
			<view class="grade-two">
				<input class="fize" v-model="userInfo.phonenumber" maxlength="11"/>
			</view>
		</view>
		<!-- 修改密码 -->
		<view class="grade">
			<text class="grade-one">密码</text>
			<view class="grade-two">
				<input class="fize"  v-model="userInfo.password" maxlength="18"/>
			</view>
		</view>
		<!-- 二次校验密码 -->
		<u-popup :show="shows" mode="center" :round="10" @close="closeps">
			<view class="u-popup-header">
				确认密码
			</view>
			<view class="" style="width: 718rpx;">
				<view class="inputTwo">
					<input class="input" v-model="password" @blur="onblur" type="number" name=""  maxlength="18">
				</view>
			</view>
			<view class="button" @click="submit" style="margin-top: 60rpx;">
				确认修改
			</view>
		</u-popup>
		<!-- 性别 -->
		<view class="grade" @click="show = true">
			<text class="grade-one">性别</text>
			<view class="grade-two">
				<view class="fize">
					{{userInfo.sex === '1'? '女':'男'}}
				</view>
				
				<u-picker :show="show" @confirm="confirm" :columns="columns" @cancel="close" keyName="label" @close="close" closeOnClickOverlay="true" ></u-picker>
			</view>
		</view>


		<view class="study-status-time" @click="modification" v-show="keybl">确认修改</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				password:'',//二次确认密码的值
				shows: false ,//控制确认密码的弹框
				key: uni.getStorageSync('roleKey'),
				ip: this.$store.state.user.URL,
				userInfo: this.$store.state.user.userInfo,
				sex: '',
				show: false,
				columns: [
					[{
						label: '男',
						// 其他属性值
						sex: '0'
						// ...
					}, {
						label: '女',
						sex: '1'
					}]
				],
			}
		},
		onShow() {
			console.log('获取信息');
			console.log(this.userInfo);

		},
		onLoad() {

		},
		computed: {
		
			// 判断是不是管理员，是管理员就返回一个false，不是就返回一个true
			keybl() {
				if (this.key === 'manager') {
					return false
				} else {
					return true
				}
			}
		},
		methods: {
			modification(){
				this.shows = true
			},
			// 二次确认密码的值
			onblur(e) {
				this.password = e.target.value
			},
			// 点击遮罩层关闭二次确认密码盒子
			closeps() {
				this.shows = false
				this.password = ''
			},
			confirm(sex){
				console.log(sex.value);
				this.userInfo.sex = sex.value[0].sex
				this.show = false
			},
			close() {
				this.show = false
			},
			// 提交修改的个人资料
			async submit() {
				// 校验手机号
				if (!uni.$u.test.mobile(this.userInfo.phonenumber)) {
					uni.showToast({
						title: "请输入正确手机号",
						icon: "none"
					})
					return
				}
				if(this.password !== this.userInfo.password){
					uni.showToast({
						title: "俩次密码不一致",
						icon: "none"
					})
					return
				}
				const res = await uni.$http.put('/business/user', this.userInfo)
				if (res.data.code == 200) {
					uni.showToast({
						icon:'none',
						title:res.data.msg
					})
					setTimeout(()=>{
						this.closeps()
					},1000)
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	// .tbody{
	// 	box-sizing: border-box;
	// 	padding: 64rpx !important;
	// }
 ::v-deep .u-popup__content {
	    height: 466rpx !important;
	}
	.inputTwo {
		position: relative;
		margin: 0 auto;
		width: 558rpx;
	
		.input {
	
			width: 100%;
			height: 96rpx;
			opacity: 1;
			border-radius: 20rpx;
			background: rgba(245, 253, 255, 1);
			box-shadow: 0px 2rpx 8rpx 0px rgba(20, 58, 64, 0.1);
		}
	}
	.button {
		width: 366rpx;
		height: 88rpx;
		border-radius: 60rpx;
		background: rgba(22, 193, 219, 1);
		box-shadow: 0px 1px 4px 0px rgba(0, 115, 133, 0.2);
		margin: 0 auto;
		font-size: 32rpx;
		font-weight: 400;
		letter-spacing: 0px;
		line-height: 88rpx;
		color: rgba(235, 252, 255, 1);
		text-align: center;
	}
	.u-popup-header {
		text-align: center;
		margin-top: 64rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: rgba(20, 58, 64, 1);
		margin-bottom: 48rpx;
	}
	.grade {
		height: 80rpx;
		width: 622rpx;
		opacity: 1;
		border-radius: 20rpx;
		background: rgba(242, 253, 255, 1);
		box-shadow: 0px 0px 4px 0px rgba(22, 193, 219, 0.2);
		display: flex;
		justify-content: space-between;
		padding: 0 32rpx;
		line-height: 80rpx;
		margin-bottom: 16rpx;

		.grade-one {
			font-size: 24rpx;
			font-weight: 400;
			color: rgba(20, 58, 64, 1);
		}

		.grade-two {
			font-size: 32rpx;
			font-weight: 400;
			color: rgba(22, 193, 219, 1);
			display: flex;
			align-items: center;
		}

		.fize {
			font-size: 24rpx;
			font-weight: 400;
			letter-spacing: 0px;
			line-height: 24rpx;
			color: #9bafb3;
			text-align: right;
			vertical-align: top;
		}
	}

	::v-deep .u-popup__content {
		width: 654rpx;
		height: 372rpx;
		opacity: 1;
		border-radius: 60rpx !important;
		background: #F5FDFF;
	}

	::v-deep .u-radio-group {
		margin-left: 50rpx;
	}

	.gender {
		font-size: 32rpx;
		font-weight: 400;
		line-height: 32rpx;
		color: rgba(20, 58, 64, 1);
		text-align: center;
		margin-top: 48rpx;
	}

	.study-status-time {
		width: 660rpx;
		height: 88rpx;
		opacity: 1;
		border-radius: 60rpx;
		background: #16c1db;
		margin-left: 26rpx;
		line-height: 88rpx;
		text-align: center;
		margin-top: 30rpx;
		font-size: 16px;
		font-weight: 400;
		color: rgba(235, 252, 255, 1);
	}
	::v-deep .u-popup__content{
		width: 750rpx !important;
	}
</style>